<template>
  <div :style="{height:appHeight}" class="box flex flex-row">
    <div class="left" :style="{width:leftWidth+'px',height:appHeight}">
      <div @click="setLeftWidth" :style="{left:leftWidth+150+'px'}" class="leftSwitch">
        <div class="drawIn"><|</div>
        <div class="drawOut">|></div>
      </div>
      <div class="leftCard">
        <el-tabs ref="tab" v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="业务员" name="1">
            <div style="padding-bottom: 100px;">
              <div v-for="items in saleTypeData">
                <div class="inCard" @click="toDetail(items.userId,1)">
                  <div class="cardTitle">
                    <div class="num flex a-item j-content">{{ items.orderNum }}</div>
                    <p class="amount flex flex-row  a-item j-content">{{ items.acceptTaxAmount }}</p>
                    <p style="left: 5px;position: absolute" >业务员：{{ items.userName }}</p>
                  </div>
                  <div class="cardContent">
                    <div class="data" v-for="item in items.saleTypeData">
                      {{ item.saleType.slice(0, 1) }}
                      {{ item.orderNum }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="客户" name="2">
            <div style="padding-bottom: 100px;">
              <div v-for="items in saleTypeData">
                <div class="inCard" @click="toDetail(items.customerId,2)">
                  <div class="cardTitle">
                    <div class="num flex a-item j-content">{{ items.orderNum }}</div>
                    <p class="amount flex flex-row  a-item j-content">{{ items.acceptTaxAmount }}</p>
                    <p style="left: 5px;position: absolute">客户：{{ items.customerName }}</p>
                  </div>
                  <div class="cardContent">
                    <div class="data" v-for="item in items.saleTypeData">
                      {{ item.saleType.slice(0, 1) }}
                      {{ item.orderNum }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="制单人" name="3">
            <div style="padding-bottom: 100px;">
              <div v-for="items in saleTypeData">
                <div class="inCard" @click="toDetail(items.createUserId,3)">
                  <div class="cardTitle">
                    <div class="num flex a-item j-content">{{ items.orderNum }}</div>
                    <p class="amount flex flex-row  a-item j-content">{{ items.acceptTaxAmount }}</p>
                    <p style="left: 5px;position: absolute" >制单人：{{ items.createUserName }}</p>
                  </div>
                  <div class="cardContent">
                    <div class="data" v-for="item in items.saleTypeData">
                      {{ item.saleType.slice(0, 1) }}
                      {{ item.orderNum }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="right" :style="{height:appHeight}">
      <div class="firstTab">
        <sale-tabs @change="getOrderProcess" :tab-list="orderProcessTabs" isFl1>
          <div class="saleButtonBox">
            <el-row class="saleButton">
              <el-button @click="getAll()">全部</el-button>
              <el-button @click="getNoPrint()">未打印</el-button>
              <el-button @click="getIsPrint()">已打印</el-button>
            </el-row>
          </div>
        </sale-tabs>
      </div>
      <div class="tabContent">
        <div style="position: relative">
          <div class="saleFormSearch">
            <el-form size="small" label-width="100px">
              <el-row>
                <el-col :xs="24" :sm="12" :md="8" :lg="9" :xl="9">
                  <el-form-item label="业务日期">
                    <div class="flex flex-row" style="width:300px;">
                      <el-date-picker
                        v-model="startDate"
                        align="right"
                        unlink-panels
                        style="width: 50%"
                        format="yyyy - MM - dd "
                        value-format="yyyy-MM-dd"
                        default-value
                        range-separator=""
                        placeholder="开始日期"
                      />
                      <el-date-picker
                        v-model="endDate"
                        align="right"
                        unlink-panels
                        style="width: 50%"
                        format="yyyy - MM - dd "
                        value-format="yyyy-MM-dd"
                        default-value
                        range-separator=""
                        placeholder="结束日期"
                      />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                  <el-form-item label="客户">
                    <table-select
                      :tableColumns="[{prop:'code',label:'单位编码',width:'100'},{prop:'name',label:'往来单位名称',width: '280'}]"
                      :value.sync="query.customerIds"
                      placeholder="请选择往来单位"
                      url="/api/dropDown/basCustomerList"
                    ></table-select>
                    <!--                    <zSelect :value.sync="customerIds" :showName="customerName" multiple url="/api/dropDown/sysUserList" style="width:  100%;"/>-->
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                  <el-form-item label="业务员">
                    <zSelect :value.sync="userIds" :showName="userName" multiple url="/api/dropDown/sysUserList" style="width:  100%;"/>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                  <el-form-item label="制单人">
                    <zSelect :value.sync="userIds" :showName="userName" multiple url="/api/dropDown/sysUserList" style="width:  100%;"/>
                  </el-form-item>
                </el-col>
                <el-button style="margin-left: 5px;margin-top: 1px" class="filter-item" size="mini" type="primary" @click="goToAdd">追加</el-button>
                <el-button style="margin-left: 5px" class="filter-item" size="mini" type="primary" @click="printIsSave">打印</el-button>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :md="8" :lg="9" :xl="9">
                  <el-form-item label="商品">
                    <zSelect multiple :value.sync="goodsIds" url="api/dropDown/basGoodsList" style="width: 100%;"/>
                    <!--                    <table-select-->
                    <!--                      :tableColumns="[{prop:'goodsCode',label:'商品编码',width:'100'},{prop:'goodsName',label:'商品名称',width: '280'}]"-->
                    <!--                      labelKey="goodsName"-->
                    <!--                      valueKey="goodsId"-->

                    <!--                      placeholder="请选择商品"-->
                    <!--                      url="/api/dropDown/basGoodsListForAdd"-->
                    <!--                    ></table-select>-->
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                  <el-form-item label="单据编号">
                    <el-input v-model="saleCode" placeholder="输入单据编号进行搜索"/>
                  </el-form-item>
                </el-col>
                <div class="search">
                  <el-button class="filter-item" size="mini" type="primary" @click="refresh">搜索</el-button>
                  <el-button class="filter-item" size="mini" type="primary" @click="loadShow = true">配车</el-button>
                  <el-button class="filter-item" size="mini" type="primary" @click="superLoadShow = true">一键配车</el-button>
<!--                  <el-button class="filter-item" size="mini" type="primary" @click="goToAdd">追加</el-button>-->
<!--                  <el-button class="filter-item" size="mini" type="primary" @click="printIsSave">打印</el-button>-->
                </div>
              </el-row>

              <!--              <el-button class="filter-item" plain   size="mini" type="primary"-->
              <!--                         @click="resetQuery">重置</el-button>-->
            </el-form>
          </div>
        </div>
        <div class="saleForm">
          <div class="secondTab">
            <sale-tabs :tab-list="saleTypeTabs" @change="getSaleType"></sale-tabs>
          </div>
          <div class="formTitle">
            <div class="box flex flex-row">
              <div class="check flex a-item j-content"><input type="checkbox" v-model="checkAllBox" @click="checkAll"></div>
              <div class="code flex a-item j-content">单号</div>
              <div class="name flex a-item j-content">客户</div>
            </div>
          </div>
          <div class="formContent">
            <sale-form :loading="loading" :options.sync="options" @query="dataquery" @showList="getShowList" @orderIndex="getOrderIndex" @orderId="getOrderId" @chooseData="getChooseData" @chooseDataAll="getchooseDataAll" @refresh="getRefresh"
                       @chooseGoods="getSaleGoods" :data="saleFormData"></sale-form>
          </div>
        </div>
      </div>

    </div>
    <div class="saleGoodsList" v-border-drag v-show="chooseGoods">
      <div class="listTitle flex flex-row">
        <div class="closeList flex a-item j-content" @click="closeList">X</div>
        <div class="title flex  j-content">订单详情</div>
      </div>
      <div class="listTop">
        <div class="listOrder ">
          <div class="flex flex-row">
            <div class="listOrderDetail flex  j-content">
              客户：{{ visualDetailTop.customerName }}
            </div>
            <div  class="listOrderDetail2 flex j-content">
              业务日期：{{ visualDetailTop.busDate }}
            </div>
          </div>
          <div class="flex flex-row">
            <div class="listOrderDetail flex j-content">
              业务员：{{ visualDetailTop.userName }}
            </div>
            <div class="listOrderDetail2 flex j-content">
              仓库：{{ visualDetailTop.warehouseName }}
            </div>
          </div>
          <div class="flex flex-row">
            <div class="listOrderDetail flex j-content">
              单据状态：{{ visualDetailTop.orderStatus }}
            </div>
            <div class="listOrderDetail2 flex j-content">
              销售类型：{{ visualDetailTop.saleType }}
            </div>
          </div>
        </div>
        <div class="title">
          商品
        </div>
      </div>
      <div class="listContent">
        <div class="content" v-for="(item,index) in visualDetailData.content" :key="index">
          <div class="box flex flex-row">
            <div class="index flex a-item j-content">{{ index+1 }}</div>
            <div class="flex a-item j-content">
              <div class="type flex a-item j-content" v-if="item.taxPrice!==item.oldTaxPrice">变价</div>
            </div>
            <div :class="{'red':(item.taxPrice!==item.oldTaxPrice)}" class="name flex a-item j-content" >
              {{ item.goodsName }}
            </div>
          </div>
          <div :class="{'red':(item.taxPrice!==item.oldTaxPrice)}" class="detail flex flex-row">
            <div class="count flex a-item j-content" >
              数量：{{ item.acceptGoodsCount }}
            </div>
            <div class="count flex a-item j-content" >
              单价：{{ item.taxPrice }}
            </div>
            <div class="count flex a-item j-content" >
              箱价：{{ item.taxBoxPrice }}
            </div>
            <div class="count flex a-item j-content" >
              金额：{{ item.acceptTaxAmount }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="配车"
               :visible.sync="loadShow"
               width="30%">
      <div>
        <el-form label-width="80px" ref="loadForm" :model="saleLoad">
          <el-form-item label="装车时间" prop="loadDate">
            <el-date-picker
              v-model="saleLoad.loadDate"
              type="date"
              format="yyyy - MM - dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="车辆" prop="carId">
            <zSelect style="width: 100%" :value.sync="saleLoad.carId"
                     url="api/dropDown/basCarList"/>
          </el-form-item>
          <el-form-item label="司机" prop="driverUserId">
            <zSelect style="width: 100%" :value.sync="saleLoad.driverUserId" url="api/dropDown/sysUserList"
                     :params="{businessAttr:'5'}"/>
          </el-form-item>
          <el-form-item label="跟车" prop="followUserIds">
            <zSelect style="width: 100%" multiple :value.sync="saleLoad.followUserIds" url="api/dropDown/sysUserList"/>
          </el-form-item>
          <!--            <el-form-item label="已核销金额">-->
          <!--              <el-input disabled v-model="crud.order.cancelAmount"></el-input>-->
          <!--            </el-form-item>-->
          <!--            <el-form-item label="未核销金额">-->
          <!--              <el-input disabled v-model="crud.order.unCancelAmount"></el-input>-->
          <!--            </el-form-item>-->
        </el-form>
      </div>
      <div class="flex flex-reverse">
        <el-button @click="saveSaleLoad">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="一键配车"
               :visible.sync="superLoadShow"
               width="30%">
      <div>
        <el-form label-width="80px" ref="loadForm" :model="superLoad">
          <el-form-item label="车辆" prop="carId">
            <zSelect style="width: 100%" :value.sync="superLoad.carId"
                     url="api/dropDown/basCarList"/>
          </el-form-item>
          <el-form-item label="司机" prop="driverUserId">
            <zSelect style="width: 100%" :value.sync="superLoad.driverUserId" url="api/dropDown/sysUserList"
                     :params="{businessAttr:'5'}"/>
          </el-form-item>
          <el-form-item label="跟车" prop="followUserIds">
            <zSelect style="width: 100%" multiple :value.sync="superLoad.followUserIds" url="api/dropDown/sysUserList"/>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex flex-reverse">
        <el-button @click="saveSuperLoad">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="追加"
               :visible.sync="loadOrderShow"
               width="50%">
      <div>
        <!--        -->
        <el-table
          ref="loadOrder"
          stripe
          border
          show-summary
          :data="loadOrderData"
          size="small"
          height="450px"
          @selection-change="selectionChangeHandler"
          style="width: 100%;">
          <el-table-column type="selection" width="60"/>
          <el-table-column type="index" width="60" label="序号"/>
          <el-table-column prop="loadId" label="配送单id" width="100"/>
          <el-table-column prop="loadCode" label="配送单号"/>
          <el-table-column prop="busDate" label="业务日期">
            <template slot-scope="scope">{{ scope.row.busDate }}</template>
          </el-table-column>
          <el-table-column prop="carName" label="车辆名称"/>
          <el-table-column prop="driverUserName" label="司机名称"/>
          <el-table-column prop="followUserName" label="跟车名称"/>
          <el-table-column prop="boxCount" label="装车箱数"/>
          <el-table-column prop="taxAmount" label="装车含税金额"/>
          <el-table-column prop="remark" label="备注"/>
        </el-table>
      </div>
      <div class="flex flex-reverse">
        <el-button @click="saveLoadOrder">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="请选择打印模板"
      :visible.sync="printConfig.printDialog"
      width="30%"
    >
      <jPrintConfig groupId="salesOrder"
                    v-if="printConfig.printDialog"
                    @getPrintId="toPrint"
                    :isPreview="printConfig.isPreview"
      ></jPrintConfig>
    </el-dialog>
  </div>
</template>

<script>
import SaleForm from "../../../components/saleForm/saleForm";
import SaleTabs from "../../../components/saleTabs/saleTabs";
import jPrintConfig from "../../../components/jPrintConfig/jPrintConfig";
import {
  visualOrder,
  visualStatistics,
  getLoadOrder,
  loadAppend,
  toLoad,
  superLoad,
  getVisualOrderDetail
} from "../../../api/erp/salesOrderVisual";
import {print} from "../../../api/erp/salesOrder";

export default {
  name: "visual",
  components: {SaleTabs, SaleForm,jPrintConfig},
  dicts: ['t_sales_order_sale_type','t_sales_order_save_order_status_is_allow_print'],
  data() {
    return {
      loadShow: false,
      superLoadShow: false,
      checkAllBox:false,
      printConfig: {
        // 是否预览
        isPreview: 0,
        printDialog: false
      },
      loading:false,
      saleLoad: {
        ids: [],
        loadDate: null,
        carId: null,
        driverUserId: null,
        followUserIds: ''
      },
      superLoad: {
        startDate: null,
        endDate: null,
        userIds: null,
        customerIds: [],
        createUserIds: [],
        goodsIds: null,
        code: null,
        isPrint: null,
        carId: null,
        driverUserId: null,
        followUserIds: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

      value1: [],
      leftWidth: 300,
      activeName: '1',
      activeName1: '1',
      tabPosition: 'left',
      chooseGoods: false,
      userIds: [],
      userName: [],
      customerIds: [],
      customerName: [],
      leftUserId:null,
      leftCustomerId: null,
      goodsIds: [],
      startDate: new Date(new Date().getTime() - 3600 * 1000 * 24 * 7).toISOString().split('T')[0],
      endDate: new Date().toISOString().split('T')[0],
      tab: 1,
      isPrint: null,
      saleTypeData: [],
      acceptTaxAmount: [],
      appHeight: '900px',
      saleTypeTabs: [],//销售类型标签
      orderProcessTabs: [],
      data: {},
      saleType: null,
      saleTypeTab: 0,
      saleCode: null,
      orderProcess: 0,
      orderProcessList:['全部单据','待配货','待调度','待配送','已收款'],
      dataList: [],
      showList: [],
      saleFormData: [],
      createUserIds: [],
      chooseSaleData: [],//选中销售单id
      chooseSaleDataIds:null,//选中销售单id
      chooseDataAll:[],//选中销售单所有数据
      loadOrderShow: false,
      loadOrderData: [],
      orderId: null,
      visualDetailData: [],//右侧数据
      visualDetailTop: [],//获取右上数据
      printLoading: false,// 打印的 Loading
      query:{
        customerIds:''
      },
      options:{
        startIndex:0,
        showRow:10,
        rowHeight: 80,
        box:null,
        nodeParent: null
      }
    }
  },
  mounted() {
    this.toQuery()
    this.appHeight = window.screen.availHeight / (this.getRatio() / 100) + 'px'
    window.addEventListener('resize', () => {
      this.appHeight = window.screen.availHeight / (this.getRatio() / 100) + 'px'
    })
    // document.querySelector(".saleGoodsList").addEventListener('mousemove',this.setrightuldrag)
  },
  updated() {

  },
  watch: {
    'saleLoad.followUserIds': {
      handler(n) {
        if (n) {
          this.saleLoad.followUserIds = this.saleLoad.followUserIds.join(',')
        }
      },
      deep: true
    },
    'superLoad.followUserIds': {
      handler(n) {
        if (n) {
          this.superLoad.followUserIds = this.superLoad.followUserIds.join(',')
        }
      },
      deep: true
    },
  },
  methods: {
    getShowList(msg){
      this.showList=msg
    },
    toDetail(id,tab){
      this.userIds = []
      this.customerIds = []
      this.createUserIds=[]
      // this.customerNames = []
      if (tab===1){
        this.userIds.push(id)
      }else if(tab===2){
        this.customerIds.push(id)
      }else if(tab===3){
        this.createUserIds = [id]
      }
      this.init()
      this.getVisualOrder()
    },
    //获取选中的所有数据
    getchooseDataAll(msg){
      this.chooseDataAll=msg
    },
    setrightuldrag(e){
      const saleGoodsList =  document.querySelector(".saleGoodsList")
      const distance =
        e.clientX-
        (document.querySelector('.sidebar-container').offsetWidth || 0)
        -saleGoodsList.offsetLeft
      if (distance < 10){
        saleGoodsList.style.cursor = 'e-resize'
      }else {
        saleGoodsList.style.cursor = 'default'
      }
      // console.log(document.querySelector('.sidebar-container')[0].offsetWidth || 0 + document.querySelector(".saleGoodsList").offsetLeft)
      // console.log(e.clientX)
    },
    refresh(){
      this.init()
      this.getVisualOrder()
    },
    toPrint(val) {
      if (val !== null) {
        this.printConfig.printDialog = false

        this.doPrint(val, this.chooseSaleData, this.printConfig.isPreview)
      } else {
        this.$message.error('请选择打印模板')
      }
    },
    saveSaleLoad() {
      this.saleLoad.ids = this.saleFormData.filter(item=>item.checked).map(item=>item.id).join(",")
      toLoad(this.saleLoad).then(res => {
      })
      this.init()
      this.getVisualOrder()
    },
    saveSuperLoad() {
      this.superLoad.startDate = this.startDate;
      this.superLoad.endDate = this.endDate;
      this.superLoad.userIds = this.userIds.join(',');
      this.superLoad.customerIds = this.customerIds.join(',');
      this.superLoad.createUserIds = this.createUserIds.join(',');
      this.superLoad.goodsIds = this.goodsIds.join(',');
      this.superLoad.code = this.saleCode;
      this.superLoad.isPrint = this.isPrint;
      superLoad(this.superLoad).then((res)=>{
        if(res.status === 200){
          this.init()
          this.getVisualOrder()
        }else {
          this.$message.error(res.msg)
        }
      }).catch((err)=>{
        console.log(err);
      })
    },
    selectionChangeHandler(val) {
      // this.changeVal = val
      console.log('val', val, val.length)
      if (val.length === 1) {
        let loadId = val[0].loadId
        sessionStorage.setItem('loadId', loadId)
      } else if (val.length > 1) {
        this.$message('只能选择一条数据')
      }

    },
    saveLoadOrder() {
      let loadId = sessionStorage.getItem('loadId')
      console.log(this.saleFormData.filter(item=>item.checked))
      loadAppend({ids: this.saleFormData.filter(item=>item.checked).map(item=>item.id).join(","), loadId}).then(res => {

          this.$message.success(res.msg)
          this.loadOrderShow =false
      })
    },
    goToAdd() {
      this.loadOrderShow = true

      getLoadOrder().then(res => {
        // let obj = res.data.content
        // for (let i in obj) {
        //   this.loadOrderData.push(obj[i]);
        // }
        this.loadOrderData = res.data.content
        // this.init()
        // this.getVisualOrder()
      })

    },
    checkAll() {
      this.saleFormData.forEach((item, index) => {
        this.$set(item, 'checked', !this.checkAllBox )
      })
    },
    getSaleType(e) {
      this.saleTypeTab = e.value
      this.saleFormData = this.dataList[e.value]?this.dataList[e.value].content:[]
      this.saleTypeName = e.name
      this.options.startIndex = 0
      document.querySelector(".formContent").scrollTop = 0
      if(this.saleFormData.length === 0){
        this.getVisualOrder()
      }
      // this.saleFormData.forEach((item, index) => {
      //   this.$set(this.saleFormData[index], 'showBox', false)
      //   this.$set(this.saleFormData[index], 'checked', false)
      // })
    },
    init(){
      this.options.startIndex = 0
      document.querySelector(".formContent").scrollTop = 0
      this.dataList=[]
    },
    getOrderProcess(e) {
      this.orderProcess = e.value
      this.init()
      this.getVisualOrder()
    },
    getAll() {
      this.isPrint = null
      this.init()
      this.getVisualOrder()
    },
    getIsPrint() {
      this.isPrint = 1
      this.init()
      this.getVisualOrder()
    },
    getNoPrint() {
      this.isPrint = 0
      this.init()
      this.getVisualOrder()
    },
    dataquery(){
      if (this.dataList[this.saleTypeTab].end)return
      this.dataList[this.saleTypeTab].page += 1
      this.getVisualOrder()
    },
    toQuery() {
      this.getVisualStatistics()
      this.init()
      this.getVisualOrder()
    },
    //获取中间数据
    getVisualOrder() {
      this.loading = true
      const order = {
        orderProcess: this.orderProcess,
        startDate: this.startDate,
        endDate: this.endDate,
        userIds: this.userIds.join(','),
        customerIds: this.customerIds.join(','),
        createUserIds: this.createUserIds.join(','),
        goodsIds: this.goodsIds.join(','),
        saleType: this.saleTypeName,
        code: this.saleCode,
        isPrint: this.isPrint,
        // page:0,size:999
        ...this.query,
        page:this.dataList[this.saleTypeTab]?this.dataList[this.saleTypeTab].page:1,
        size:20
      }

      // if (this.leftUserId || this.leftCustomerId){
      //   order.customerIds=this.leftCustomerId
      //   order.userIds=this.leftUserId
      // }
      visualOrder(order).then(res => {
        try {
        let sale= this.dataList[this.saleTypeTab]
        if (!sale){
          this.dataList[this.saleTypeTab] = res.data.saleTypeData[this.saleTypeTab]
          this.dataList[this.saleTypeTab].page = 1
        }else {
          sale.content =sale.content.concat(res.data.saleTypeData[this.saleTypeTab].content)
        }
        if (res.data.saleTypeData[this.saleTypeTab].content.length < 20){
          this.dataList[this.saleTypeTab].end= true
        }else {
          this.dataList[this.saleTypeTab].end= false
        }
        // this.dataList = res.data.saleTypeData
        this.saleTypeTabs = res.data.saleTypeData.map((item, index) => {
          return {name: item.saleType, value: index,summary:item.orderNum}
        })
        this.orderProcessTabs = res.data.orderProcessData.map((item, index) => {
          return {name: this.orderProcessList[item.orderProcess], value: index,summary:item.orderNum}
        })
        this.saleFormData = this.dataList[this.saleTypeTab].content
        this.loading = false}catch (e){console.log(e)}
        // if (this.dataList.length!==0) this.saleFormData = this.dataList[this.saleTypeTab].content
        // else this.saleFormData = []


        // this.saleFormData.forEach((item, index) => {
        //   this.$set(this.saleFormData[index], 'showBox', false)
        //   this.$set(this.saleFormData[index], 'checked', false)
        // })
      }).catch(e=>{this.loading = false})
    },
    changeSaleType(e) {
      console.log(e)
    },
    getRatio() {
      var ratio = 0
      var screen = window.screen
      var ua = navigator.userAgent.toLowerCase()

      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio
      } else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI
        }
      } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth
      }

      if (ratio) {
        ratio = Math.round(ratio * 100)
      }
      return ratio
    },
    getVisualStatistics() {
      this.data = {
        tab: this.tab,
        page: 0, size: 999
      }
      this.saleTypeData = []
      visualStatistics(this.data).then(res => {
        res.data.content.forEach(item => {
          this.saleTypeData.push(item)
        })
      })
    },
    doPrint(templateId, rowIds, isPreview = 0) {
      let data = { ids:rowIds, templateId, isPreview }
      this.printLoading = true
      print(data).then(res => {
        const blob = new Blob([res], { type: 'application/pdf' })
        var date = (new Date()).getTime()
        var iframe = document.createElement('iframe')
        iframe.style.frameborder = 'no'
        iframe.style.display = 'none'
        iframe.style.pageBreakBefore = 'always'
        iframe.setAttribute('id', 'printPdf' + date)
        iframe.setAttribute('name', 'printPdf' + date)
        iframe.src = window.URL.createObjectURL(blob)
        document.body.appendChild(iframe)
        var printWindow = document.getElementById('printPdf' + date).contentWindow
        setTimeout(() => {
          printWindow.print()
          this.printLoading = false
        }, 100)
        window.URL.revokeObjectURL(iframe.src)
        this.printLoading = false
      }).catch(e => {
        this.printLoading = false
      })
    },
    closeList() {
      this.chooseGoods = false
    },
    setLeftWidth() {
      if (this.leftWidth) {
        this.leftWidth = 0
      } else {
        this.leftWidth = 300
      }
    },
    handleClick(e) {
      this.customerIds = []
      this.userIds = []
      this.tab = Number(e.index) + 1
      this.getVisualStatistics()
    },
    getSaleGoods(msg) {
      this.chooseGoods = msg
    },
    getRefresh(msg) {
      if (msg === true) this.getVisualOrder()
      console.log(msg)
    },
    getChooseData(msg) {
      this.chooseSaleData = msg
    },
    getOrderId(msg) {
      this.orderId = msg
      getVisualOrderDetail({id: this.orderId}).then(res => {
        this.visualDetailData = res.data
      })
    },
    getOrderIndex(val){
      this.visualDetailTop = val
      // console.log('!!!!!!!!!!!!!!!')
      // console.log(this.showList,msg)
      // console.log(this.visualDetailTop)
    },
    async printIsSave(){
      this.saleFormData.filter(item=>item.checked).map(item=>item.id).forEach(i=>{
        if(this.dict.t_sales_order_save_order_status_is_allow_print[0].value == '0' && i.orderStatus === 'SAVE'){
          this.$message.error('保存状态单据不允许打印')
          return
        }else if (i.isPrint == '1'){
          this.$message.error(`单据${ i.code }已打印`)
          return
        }else {
          this.printConfig.printDialog = true
        }
      })
      // this.preView()
      setTimeout(()=>{this.toQuery()},6000)
      // this.crud.refresh()
    },
  }
}
</script>

<style lang="scss" scoped>
.box {
  .left {
    overflow-y: auto;
    background: #ffffff;
    transition: width linear 0.3s;
    position: relative;
    border-right: 2px solid #d8d8d8;

    .leftSwitch {
      transition: left linear 0.3s;
      width: 100px;
      height: 40px;
      background: rgba(0, 0, 0, 0.2);
      color: #ffffff;

      &:hover {
        background: rgba(0, 0, 0, 0.8);
      }

      cursor: pointer;
      position: fixed;
      //right: -50px;
      z-index: 99;

      .drawIn {
        font-size: medium;
        margin-left: 10px;
        display: inline-block;
        width: 20px;
      }

      .drawOut {
        font-size: medium;
        margin-left: 45px;
        width: 20px;
        display: inline-block;
      }

    }

    .leftCard {
      width: 100%;
      position: absolute;
      //margin-top: 50px;
      height: 95%;
      //background: #ffffff;

      .inCard {
        //margin-top: 2px;
        height: 100px;
        width: 100%;
        //background: #0b9c54;
        border: 1px solid #d8d8d8;
        &:hover {
          background: rgba(231, 241, 255, 1);
        }

        .cardTitle {
          width: 100%;
          height: 25%;
          //background: #00a2d4;
          position: relative;
          display: flex;
          flex-direction: row-reverse;
          align-items: center;
          padding-right: 20px;

          .amount {
            height: 100%;
            color: red;
            font-weight: bolder;

            &:after {
              content: '元';
              color: #000000;
            }
          }

          .num {
            min-width: 13px;
            padding: 0 5px;
            height: 13px;
            border-radius: 13px;
            background: red;
            color: white;
            font-size: 10px;
            font-weight: bolder;
            top: 10%;
            right: 10px;
          }
        }

        .cardContent {
          width: 100%;
          height: 75%;
          overflow-y: auto;

          .data {
            display: flex;
            float: left;
            width: 25%;
            height: 50%;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }

  .right {
    width: 80%;
    height: 100%;
    margin-left: 10px;
    //background: gray;
    //position: relative;
    .firstTab {
      //left: 6%;
      //top: 95px;
      height: 45px;
      width: 100%;
      padding-top: 20px;
      position: relative;
    }

    .tabContent {
      position: relative;
      border: 2px solid #E4E7ED;
      margin-top: 11px;
      height: 100%;
    }

    .saleFormSearch {
      left: 6%;
      margin-top: 8px;
      height: auto;

      .search {
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 10px;
        margin-top: 5px;
        display: flex;
      }
    }

    .saleForm {
      width: 100%;
      height: 70%;
      margin-top: 2px;

      .secondTab {
        width: 100px;
        height: 37px;
        position: relative;
      }
    }

    .formTitle {
      width: 100%;
      height: auto;
      background: #F0F0F0;
      border: 2px solid #d8d8d8;

      .box {
        height: 30px;
        padding: 3px;
        overflow: auto;

        .check {
          width: 50px;
          height: 100%;
          color: #0000cc;

        }

        .code {
          padding: 0 10px;
        }

        .name {
          margin-left: 30px;
          cursor: pointer;
        }
      }


    }

    .formContent {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      margin-bottom: 20px;
    }

    .saleButtonBox {
      width: 300px;
      right: 10px;
      //background: #00a2d4;
      height: 30px;
      margin-left: 10px;
    }

  }

  .saleGoodsList {
    height: 100%;
    width: 350px;
    position: absolute;
    right: 5px;
    background: white;
    //box-shadow: -4px 0px #5a5e664d;
    box-shadow: 0 0 2px 2px #5a5e664d;
    .listTitle{
      .title{
        align-items: center;
        margin-left: 35%;
        font-weight: bolder;
        font-size: small
      }
      .closeList {
        cursor: pointer;
        font-size: medium;
        margin: 5px;
        position: relative;
      }
    }


    .listTop {
      height: 100px;
      width: 100%;
      position: relative;

      .listOrder {
        height: 75px;
        width: 100%;

        .listOrderDetail{
          align-items: center;

          padding: 0 15px;
          margin-top: 5px;
          font-size: small;
        }
        .listOrderDetail2{
          margin-top: 5px;
          align-items: center;
          font-size: small;
          left: 50%;
          position: absolute;
        }
      }

      .title {
        position: relative;
        text-align: center;
        width: 100%;
        height: 30%;
        line-height: 200%;
        border: 1px solid #d8d8d8;
        background: #F0F0F0;
      }
    }

    .listContent {
      position: relative;
      background: white;
      height: 77%;
      width: 100%;
      top: 5px;
      .content {
        height: 70px;
        border: rgba(203, 203, 203, 0.8);

        &:hover {
          background: rgba(231, 241, 255, 1);
        }
        .box {
          height: 20px;
          margin-top: 5px;

          .index {
            height: auto;
            margin-left: 10px;
            padding: 0 7px;
            color: white;
            background: #e3a603;
            font-weight: bolder;
          }

          .type {
            width: 30px;
            margin: 0 10px;
            background: #409EFF;
            color: white;
          }

          .name {
            font-size: 14px;
            margin: 0 10px;
          }

        }
      }
      .detail{
        height: 50%;
        .count{
          padding: 0 10px;
        }
      }
    }
  }
}
.red{
  color: red;
}
</style>
